<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>getElementsByTagName的使用</title>
    <script type="text/javascript">
      function change() {
        //得到三个图片的 dom对象
        // images 是一个 HTMLxxxxCollections 是一个集合
        var images = document.getElementsByTagName("img");

        //得到按钮的dom对象
        var but1 = document.getElementById("but1");

        if (but1.value == "查看多少只小猫，并切换成小狗") {
          for (var i = 0; i < images.length; i++) {
            images[i].src = "../images/" + (i+6) +".png";
          }
          but1.value = "查看多少只小狗，并切换成小猫";
        } else if (but1.value == "查看多少只小狗，并切换成小猫"){
          for (var i = 0; i < images.length; i++) {
            images[i].src = "../images/" + (i+3) +".png";
          }
          but1.value = "查看多少只小猫，并切换成小狗";
        }
      }
    </script>
  </head>

  <body>
    <img src="../images/3.png" height="100">
    <img src="../images/4.png" height="100">
    <img src="../images/5.png" height="100">
    <br/>
<!--静态绑定-->
    <input type="button" id="but1" onclick="change()" value="查看多少只小猫，并切换成小狗"/>
  </body>
</html>